﻿@{
    ViewBag.Title = "产品详情";
    var product =ViewData["product"] as Pay.DTO.product_dto;
    var domain = ViewData["url"] as string;
    var list = ViewData["list"] as Pay.TO.PagedResult<Pay.DTO.product_dto>;
    var merchantNo = ViewData["distributeNo"] as string;
    var img = domain + product.first_image;
    var orderNo = ViewData["order_no"] as string;
}
<html>

<head>
    <meta charset="UTF-8">
    <title>@product.name</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" type="text/css" href="~/Content/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/gelunbu.css" />

</head>

<body style="background: #F0F0F0;">
    <!--商品详情轮播-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            @if (product != null && product.image_path != null && product.image_path.Count > 0) {
                foreach (var item in product.image_path) {
                    var src = domain + item;
                    <div class="swiper-slide"><img src="@src" width="100%"></div>
                }
            }
        </div>
        <div class="swiper-pagination"></div>
    </div>


    <div class="pro_detail_box">
        <div class="pro_price">
            $@product.price <del class="del_price">$@product.market_price</del>
        </div>

        <h1 class="pro_title">@product.name</h1>
        <p class="pro_txt">@product.short_description</p>

        <div class="country"><i class="icon_country"></i>来自美国 海外直邮下单需提供真实姓名和身份证号码</div>
        @if (product.product_skus != null && product.product_skus.Count > 0) {
            <div class="choice">已选： @product.product_skus[0].sku_name</div>
        }
        <div class="pro_detials" style="width:100%;">
            @Html.Raw(product.description)

        </div>
    </div>

    <div class="shopping_car_bottom">
        <div class="shoping_car_right" style="float:right">
            <a href="javascript:;" onclick="Buy()" class="buy_now">立即购买</a>
        </div>
    </div>

    <!--选择商品属性-->
    <div class="property_bg"></div>
    <div class="pro_property">
        <div class="propert_tit">
            <img src="@img" class="propert_img" />
            <section class="pro_rg">
                @if (product.product_skus != null && product.product_skus.Count > 0) {
                    <h1 class="propert_price">$@product.product_skus[0].price</h1>
                    <p>已选：@product.product_skus[0].sku_name</p>
                }
            </section>
        </div>
        <div class="spec">
            <p class="spec_small_tit">规格：</p>
            <section class="spec_list">
                @if (product.product_skus != null && product.product_skus.Count > 0) {
                    for (var index = 0; index < product.product_skus.Count; index++) {
                        if (index == 0) {
                            <span class="active">@product.product_skus[index].sku_name</span>
                        } else {
                            <span>@product.product_skus[index].sku_name</span>
                        }
                    }
                }
            </section>
        </div>

        <div class="number">
            <p class="spec_small_tit" style="float: left;">数量：</p>
            <div class="plussub" style="float: left;">
                <span onclick="sub(1)" class="sub">-</span>
                <input class="yzquantity1" onblur="yzquantity(1)" type="text" value="1">
                <span onclick="plus(1)" class="plus">+</span>
            </div>
            <div class="clear" style="clear:both;"></div>

        </div>

        <p class="remark"></p>

        <div class="shoping_car_right" style="width:100%;">
            <a href="javascript:;" onclick="SkuBuy()" class="buy_now">立即购买</a>
        </div>
    </div>

    <script src="~/Content/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="~/Content/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="~/Content/js/layer/1.9.3/layer.js"></script>
    <script src="~/Content/js/jquery.base64.js"></script>
    <script type="text/javascript">
        var base64 = $.base64;
        $(document).ready(function () {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                autoplay: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                }
            });
            var product = @Html.Raw(Json.Encode(product.product_skus));

            //选择商品规格
            $(".spec_list span").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var txt = $(".pro_rg p").text();

                if (product.length > 0) {
                    for (var i = 0; i < product.length; i++) {
                        if (product[i].sku_name == this.innerText) {
                            $(".pro_rg p").html("已选："+product[i].sku_name);
                            $(".propert_price").html(product[i].price.toFixed(2));
                        }
                    }
                }
            });

            //弹出层
            $(".choice").click(function () {
                $(".property_bg").show();
                $(".pro_property").animate({
                    "bottom": '0'
                })
            });
            //关闭
            $(".property_bg").click(function () {
                $(this).hide();
                $(".pro_property").animate({
                    "bottom": '-350px'
                })
            });
        });
        /*增加或删除数量*/
        function sub(psid) {
            var yzquantity = $(".yzquantity" + psid).val();
            if (yzquantity > 0) {
                if (yzquantity == 1) {
                    alert("已到达最小数量！");
                    return;
                }
                yzquantity--;
                $(".yzquantity" + psid).val(yzquantity);
            } else {
                alert("请输入有效数量！");
            }
        }

        function plus(psid) {
            var yzquantity = $(".yzquantity" + psid).val();
            if (yzquantity > 0) {
                yzquantity++;
                $(".yzquantity" + psid).val(yzquantity);
            } else {
                alert("请输入有效数量！");
            }
        }
        function GetSkuId(name) {
            var product = @Html.Raw(Json.Encode(product.product_skus));
            var id = 0;
            if (product.length > 0) {
                for (var i = 0; i < product.length; i++) {
                    if (product[i].sku_name == name) {
                        id = product[i].id;
                        break;
                    }
                }
            }
            return id;
        }
        function yzquantity(psid) {
            var yzquantity = $(".yzquantity" + psid).val();
            var reg = /^[0-9]*$/;
            reg.test(yzquantity);
            if (reg.test(yzquantity) == false) {
                alert("请输入有效数量！");
                $(".yzquantity" + psid).val(yzquantity);
            }
        }

        function SkuBuy() {
            var skuid = GetSkuId($(".pro_rg p").text().substring(3));
            var carts = new Array();
            carts.push({merchantid: '@product.merchant_id', SkuId: skuid, ProductId: '@product.id', quantity: $(".yzquantity1").val() });
            var model = base64('encode', JSON.stringify(carts));
            window.location.href = "/CheckOut/FirmOrder?model=" + model;
        }
        function Buy() {
            var carts = new Array();
            carts.push({merchantid: '@product.merchant_id', ProductId: '@product.id', quantity: $(".yzquantity1").val()});
            var model = base64('encode', JSON.stringify(carts));
            window.location.href = "/CheckOut/FirmOrder?model=" + model;
        }
    </script>
</body>

</html>